<%@ page language="java"  pageEncoding="UTF-8"%>
<%@taglib uri="/WEB-INF/struts-tags.tld" prefix="s"%>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>用户注册-沈阳外卖网</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Bootstrap -->
<link href="publicui/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<!--[if lt IE 9]>
  <script src="public/js/html5shiv.js"></script>
<![endif]-->
<!-- application  -->
<link href="css/head.css" rel="stylesheet" />
<link href="css/foot.css" rel="stylesheet" />
<link href="css/reg.css" rel="stylesheet" />
</head>
<body >
<div class="body_bg" >
<!-----nav-->
<s:action name="shopTop" executeResult="true"></s:action>
<!---/nav   --> 

<!---/body   -->
<div class="content" > 
<!--   content  -->
<div class="loginpage">
 <div class="loginpage_img"></div>
 <div  class="login_box" > 
 <div class="content">
	<div id="tab" >
		<ul>
			<li class="login_link_off" >
				<a href="shopkeeper_login.action"><span>店员登录</span> </a>
			</li>
			<li class="reg_link_on" >
				<a href="shopkeeper_reg.action"><span>免费注册</span> </a>
			</li>
		</ul>
	</div>
	<div id="login_form_div" class="hidden" >
	</div>
	<div id="register_form_div">
	<form method="post" action="shopkeeper_reg.action" id="register_form" name="register">
		<input type="hidden" name="action" value="save"/>
		<div class="field_line mbt5">
			<span class="red">*</span> 用户名&nbsp;&nbsp;<span class="red" id="usernameMsg"></span>
		</div>
		<div class="field_line mbt5">
			<input type="text" name="username" id="username" maxlength="20" onblur="checkUsernameAction();" class="input_text"/>
		</div>
		<div class="field_line mbt5">
			<span class="red">*</span> 密码&nbsp;&nbsp;<span class="red" id="passwordMsg"></span>
		</div>
		<div class="field_line mbt5">
			<input type="password" name="password" id="password" maxlength="20" onKeyUp="passwordTest(this)" onblur="checkPasswordAction();" class="input_text"/>
		</div>
		<div class="field_line mbt5">
			<span class="red">*</span> 确认密码&nbsp;&nbsp;<span class="red" id="passfirmMsg"></span>
		</div>
		<div class="field_line mbt5">
			<input type="password" name="passfirm" id="passfirm" maxlength="20" onblur="checkPassfirmAction();" class="input_text"/>
		</div>
		<div class="field_line mbt5">
			<span class="red">*</span> 验证码&nbsp;&nbsp;<span class="red" id="verifycodeMsg"></span>
		</div>
		<div class="field_line mbt5">
			<input name="verifycode" id="verifycode" type="text" maxlength="4" />
			<a href="javascript:showAuthImg()" class="link_red" title='看不清，换一个'><img alt="验证码" src="/authimg" id="authimg" name="authimg" align="absmiddle" /></a>
		</div>
		<div class="field_line mbt5">
			<input id="isread" name="isread" type="checkbox" value="" checked="checked" />
			<span>我同意<a target="_blank" href="../protocol.html"
				class="link">使用条款和协议</a>
			</span>
			<span class="success4" id="isreadMsg"></span>
			<span class="reg_button_wrapper"> <input type="submit"
					title="" value="注册" id="register_btn" data-loading="提交中…"
					class="f14 btn w75 h30 btn-yellow yellow_h30_w75_p20" onclick="VF_regflag();return false;"/> </span>
		</div>
	</form>

</div>
</div>
 </div>
</div>
<!--   /content  -->
    <s:action name="foot" executeResult="true"></s:action>
</div>
<!--  alert div start---->
<div id="copy_dlg_restaurant"  class="restaurant-hover-dlg right hide" >
  <div class="wrapper dark_shadow">
    <div class="callout_tip"></div>
    <div class="detail"> </div>
  </div>
</div>
<!--  alert div  end ---->

<!---/body   --> 

</div>
<script src="publicui/js/jquery-1.8.3.js"></script> 
<script src="publicui/jquery-ui/js/jquery-ui-1.9.2.custom.js"></script> 
<script src="publicui/bootstrap/js/bootstrap.min.js"></script> 
<script src="js/head.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
function checkUsernameAction() {
  if ($('#username').val()=="") {
    $('#usernameMsg').html('请您填写用户名');
    return false;
  }
  if(!checkUsername()){
    $('#usernameMsg').html('请填写6-18位的字母和数字');
    return false;
  }
  checkUsernameAjax();
  $('#usernameMsg').html('<img src="../images/check_right.gif" width="16" height="16">');
  return true;
}
function checkPasswordAction(){
	if ($('#password').val()=="") {
    	$('#passwordMsg').html('请您填写密码');
    	return false;
  	}
  	if(!checkPassword()){
  		$('#passwordMsg').html('请填写6-18位的字母和数字');
    	return false;
  	}
  	$('#passwordMsg').html('<img src="../images/check_right.gif" width="16" height="16">');
  	return true;
}

function checkPassfirmAction(){
	if ($('#passfirm').val()=="") {
    	$('#passfirmMsg').html('请您填写确认密码');
    	return false;
  	}else{
  		if($('#password').val()!=$('#passfirm').val()){
  			$('#passfirmMsg').html('确认密码与密码不相同');
  			return false;
  		}
  	}
  	$('#passfirmMsg').html('<img src="../images/check_right.gif" width="16" height="16">');
  	return true;
}

function checkVerifyAction() {
  if ($('#verifycode').val()=="") {
    $('#verifycodeMsg').html('请您填写验证码');
    return false;
  }
  return true;
}

function VF_regflag(){
	var check_bl01=checkUsernameAction();
	var check_bl02=checkPasswordAction();
	var check_bl03=checkPassfirmAction();
	var check_bl06=checkVerifyAction();
	var check_bl05=false;
	if($('#isread').checked==false){
		$('#isreadMsg').html('请确认服务条款');
	}else{
		$('#isreadMsg').html('<img src="../images/check_right.gif" width="16" height="16">');
		check_bl05=true;
	}
	if(check_bl01  && check_bl02  && check_bl03 && check_bl05 &&check_bl06){
		$('#register_form').submit();
	}
}
function checkUsername(){
	var username = $('#username').val();
	var regu =/^[a-zA-Z0-9_]{6,18}$/;//字母数字下划线
	//var regu ='^[a-zA-Z](\w){5,17}$';//以字母开头，长度在6~18之间，只能包含字符、数字和下划线
	var re = new RegExp(regu);
	if (re.test(username)) {
   		return true;
	}else{
   		return false;
	}
}

function checkUsernameAjax(){
	$.ajax({
		url:'shopkeeper_reg.action?action=checkUsername&username='+$('#username').val(),
		dataType:"html", 
		success: function(html){
			if(html == 0){
				$('#usernameMsg').html('<img src="../images/check_right.gif" width="16" height="16">');
			}else{
				$('#usernameMsg').html('此用户名已被注册');
			}
		}
	});
	//var url = 'regUser.action?action=checkUsername&username='+$('#username').val();
    //var myAjax = new Ajax.Request(url,{method: 'get', onComplete: onCompleteUsernameAjax});
}
//function onCompleteUsernameAjax(originalRequest){
//	var data = originalRequest.responseText;	
//}

function checkPassword(){
	var password = $('#password').val();
	var regu =/^[a-zA-Z0-9_]{6,18}$/;//字母数字下划线
	//var regu ='^[a-zA-Z](\w){5,17}$';//以字母开头，长度在6~18之间，只能包含字符、数字和下划线
	var re = new RegExp(regu);
	if (re.test(password)) {
   		return true;
	}else{
   		return false;
	}	
}

function passwordTest(obj) {  
    var value = obj.value;  
    var result = getResult(value);  
    check(result);  
}  
              
function getResult(value) {  
    if(value.length < 3) {  
        return 0;  
    }  
    var i = 0;  
    if(value.match(/[A-Za-z]/ig)){
        i++;  
    }  
    if(value.match(/[0-9]/ig)){
        i++;  
    }  
    if(value.match(/[^A-Za-z0-9]/ig)){
        i++;  
    }  
    if(value.length < 6 && i > 0){  
        i--  
    }  
    return i;  
}  
              
function check(num) {  
    if(num == 0) {  
        $("#passwordMsg").html("密码太短");  
    } else if (num == 1) {  
        $("#passwordMsg").html("密码强度差");  
    } else if (num == 2) {  
        $("#passwordMsg").html("密码强度良好");  
    } else if (num == 3) {  
        $("#passwordMsg").html("密码强度高");  
    } else {  
        $("#passwordMsg").html("未知错误");  
    }  
}  

function showAuthImg(){
	var url="/authimg?time="+new Date().getTime();
	$("#authimg").attr("src",url);
}
-->
</script>
<s:if test="error!=null&&error!=''">
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">提示</h3>
  </div>
  <div class="modal-body">
    <p><s:fielderror><s:param>error</s:param></s:fielderror></p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
   <!-- <button class="btn btn-primary">确定 </button>   -->
  </div>
</div>
<script type="text/javascript"  >
$('#myModal').modal();
</script>
</s:if>
</body> 
</html>
<!-- haha! everyone is a frontier -->

